<script setup>
  import { ref, onMounted, computed } from 'vue';
  import { useBreadcrumbData } from '@/stores/breadcrumb'
  import { downloadFile } from '@/http/api'
  import { ElMessageBox } from 'element-plus'
  import { genFileId } from 'element-plus'
  
  // 面包屑数据
  const breadcrumbList = ref([
    {
      name: '首页',
      routeName: 'homeData'
    },
    {
      name: 'base64图片互转',
      routeName: 'base64ToPic'
    },
  ]);

  const imgBase64 = ref('');
  const uploadAction = import.meta.env.VITE_API_URL + "/uploadPic";

  const base64Pic = computed( () => {
    return "data:image/png;base64," + imgBase64.value;
  })

  const breadcrumbDataStore = useBreadcrumbData();
  breadcrumbDataStore.setBreadcrumbData(breadcrumbList);

  onMounted(() => {
    // doPost("/getUserInfo", { userId:"33" }).then(res => {
    //   userName.value = res.name;
    //   age.value = res.age;
    // });
  })

  const downLoad = () => {
    if (imgBase64.value == "") {
      ElMessageBox.alert("请输入base64字符串", "提示", {
        confirmButtonText: '确定',
      });
      return;
    }

    ElMessageBox({
      title: '下载图片',
      message: `是否下载图片？`,
      type: 'warning'
    }).then(() => {

      downloadFile("/downLoadPic", { base64Str: imgBase64.value })
    }).catch((err) => {
      console.log("err:", err);
    })
  }

  const upload = ref();

  const handleSuccess = (response) => {
    console.log("res:", response);
    if (response.retCode == "000000") {
      imgBase64.value = response.data.imgBase64;
    } else {
      ElMessageBox({
        title: '提示',
        message: `上传失败：${response.retMsg}`,
        type: 'warning'
      }).then(() => {
      });
    }
  };

const handleExceed = (files) => {
  console.log("files:", files);
  upload.value.clearFiles()
  const file = files[0]
  file.uid = genFileId()
  upload.value.handleStart(file)
  upload.value.submit()
}

const handleError = (error) => {
    console.log("res:", error);
    ElMessageBox({
        title: '提示',
        message: `上传失败：${error}`,
        type: 'warning'
      }).then(() => {
      });
  };

</script>

<template>
  <main class="main">
    <h1>base64图片互转</h1>

    <h2>base64转图片</h2>
    <el-text>在&lt;img&gt;标签的src属性中使用Base64字符串添加前缀：data:image/jpeg;base64,</el-text>
    <el-row class="margin-top-bottom-10">
      <el-button @click="downLoad">下载图片</el-button>
    </el-row>
    <el-row gutter="10">
      <el-col :span="12">
        <el-input style="height: 325px;" rows="15" type="textarea" placeholder="请输入base64" v-model="imgBase64"></el-input>
      </el-col>
      <el-col :span="12">
        <el-image style="height: 325px;" fit="contain"  :src="base64Pic">
          <template #error>
            <div class="image-slot">Loading<span class="dot">...</span></div>
          </template>
        </el-image>
      </el-col>
    </el-row>

    <h2>图片转base64</h2>
    <el-upload
      ref="upload"
      v-model:file-list="fileList"
      class="upload-demo"
      :action="uploadAction"
      multiple
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :limit="1"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <el-button type="primary">上传</el-button>
      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 50MB.
        </div>
        <div class="el-upload__tip text-red">
          limit 1 file, new file will cover the old file
        </div>
      </template>
    </el-upload>
  </main>
</template>

<style scoped>
  .main {
    padding: 20px;
  }

</style>